<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
  <link href="../dist/Essa/Textarea/Textarea.css" rel="stylesheet" />
  <link href="../dist/Essa/RadioGroup/RadioGroup.css" rel="stylesheet" />
  <style>
    .container {
      padding: 50px;
    }
  </style>
</head>

<body>
  <div ng-app="essa.common.components" ng-controller="mainCtrl">
    <div class="container">
      <es-tabs default-active-key="1">
        <es-tab-pane tab="AAA" key="1">Content of Tab Pane 1</es-tab-pane>
        <es-tab-pane tab="BBB" key="2">Content of Tab Pane 2</es-tab-pane>
      </es-tabs>
    </div>
  </div>
  <script src="https://cdn.staticfile.org/angular.js/1.2.28/angular.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script>
    angular
      .module("essa.common.components", [])
      .controller("mainCtrl", function ($scope) {
        $scope.handleChange = function (value) {
          console.log("mainCtrl.value", value)
          // console.log("mainCtrl.$scope", $scope);
          // console.log("mainCtrl.scope", scope);
          // console.log("mainCtrl.value", value);
        };
      });
  </script>
  <script src="../dist/Essa/Tabs/Tabs.js"></script>
  <script src="../dist/Essa/TabPane/TabPane.js"></script>
</body>

</html>